<template>
  <div class="grid">
      <div  ref="content" class="content">
          <div class="btn">
            <button @click="run"> 运行</button>
          </div>
      </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Application } from "metadesktop";

import { GraphNodeLayout } from '../GraphicProgramming/graph_node_layout';
import { LanguageAnalysis } from '../GraphicProgramming/language_analysis/index';

export default defineComponent({
  config: {
      name: "自定义节点",
      size: {
          width: "95%",
          height: "95%"
      },
      title: "Video",
      level: Application.LEVEL_DEFAULT,
      icon: '<svg t="1667378297362" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3343"><path d="M512 929.959184c-230.4 0-417.959184-187.559184-417.959184-417.959184s187.559184-417.959184 417.959184-417.959184 417.959184 187.559184 417.959184 417.959184-187.559184 417.959184-417.959184 417.959184z" fill="#16C4AF" p-id="3344"></path><path d="M512 715.755102c-46.497959 0-90.383673-6.269388-123.297959-17.240816-55.379592-18.808163-67.395918-47.020408-67.395919-67.918368 0-71.57551 46.497959-135.836735 119.118368-162.481632 7.836735-3.134694 16.718367-1.044898 22.465306 5.22449 13.061224 14.106122 30.82449 21.942857 49.110204 21.942857s35.526531-7.836735 49.110204-21.942857c5.746939-6.269388 14.628571-8.359184 22.465306-5.22449 72.097959 27.167347 119.118367 90.906122 119.118368 162.481632-0.522449 62.693878-102.922449 85.159184-190.693878 85.159184z" fill="#0B9682" p-id="3345"></path><path d="M512 532.897959c-62.171429 0-112.326531-50.677551-112.326531-112.32653S449.828571 308.244898 512 308.244898s112.326531 50.677551 112.326531 112.326531S574.171429 532.897959 512 532.897959z" fill="#DCFFFA" p-id="3346"></path></svg>',
  },
  data(){
    return {
        layout: new GraphNodeLayout()
    }
  },
  mounted(){
    // 清空默认菜单列表
    this.layout.clearMenu();

    // 添加自定义列表
    // this.layout.addMenu((class extents ))

    this.layout.appendTo( this.$refs.content );
  },
  methods:{
    run(){
        console.log(this.layout.toToken());
        
        const code = new LanguageAnalysis().analysis( this.layout.toToken() , "js");
        
        console.log("生成代码", code );

        const run = new Function( "const fun = " +( code || "function(){}") + "; fun()" );

        run();
    }
  }
});
</script>

<style scoped lang="less">
.grid {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    overflow: hidden;
    
    .btn {
        position: absolute;
        left: 20px;
        top: 5px;
        z-index: 4;
        align-items: center;
        padding: 5px 20px;
        background: rgba(0, 0, 0, 0.2);
        width: auto;
        transform: translateX(-0%);

        button {
            margin: 5px;
            padding: 2px 10px;
            background: none;
            border: solid 1px white;
            color: white;
            cursor: pointer;
            border-radius: 30px;
            font-size: 12px;
            a{
                color: white;
                text-decoration: none;
            }
        }
        button:active{
            transform: scale(0.95,0.95);
        }
        svg{
            transition: 0.25s;
            cursor: pointer;
            width: 20px;
            margin: 0 5px;
        }
        svg:hover{
            transform: scale(1.15,1.15);
        }
        svg:active{
            transform: scale(0.95,0.95);
        }
    }
    .content {
        position: relative;
        flex: 1;
        overflow: hidden;
        height: 100%;
        // background: #333;

        &>h3 {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: rgb(69, 69, 69);
        }
    }
    .menu {
        position: relative;
        width: 270px;
        background: #e9e9e9;
        z-index: 1000;
        border-right: solid 1px white;
        padding: 2px;
        height: 100%;
        // overflow: hidden;
        display: flex;
        flex-direction: column;
        padding-right: 5px;

        &>.option {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            li {
                font-size: 12px;
                color: rgb(44, 44, 44);
                padding: 5px;
                cursor: pointer;
                display: flex;
                align-content: center;
            }

            border-bottom: solid 1px rgb(110, 110, 110);
        }

        svg{
            width: 20px;
            height: 20px;
            transition: 0.25s;
        }

        img:active,svg:active{
            transform: scale(0.8,0.8);
        }

        .switch{
            display: none;
        }

        .resize{
            position: absolute;
            width: 1px;
            height: 100%;
            background: rgb(255, 255, 255);
            --color: rgb(198, 198, 198);
            border-left: solid 1px var(--color);
            border-right: solid 1px var(--color);
            top: 0;
            right: 0;
            cursor: col-resize;
        }
    }
}
@media screen and (max-width: 800px) {
    .grid{
        .menu{
            position: absolute;
            height: 100%;
            z-index: 10001;
            transform: translateX(-100%);
            transition: 0.25s;
            .switch{
                position: absolute;
                left: 101%;
                top: 50%;
                transform: translateY(-50%);
                white-space: nowrap;
                background-color: rgba(0, 0, 0, 0.1);
                padding: 5px;
                display: block;
                svg{
                    width: 24px;
                    transition: 0.25s;
                    fill: rgb(87, 87, 87);
                }
            }
        }
        
        .menu_switch_open{
            transform: translateX(0);
            .switch{
                svg{
                    transform: rotate(-180deg);
                }
            }
            
        }
    }
}
</style>
